<template>
    <div>
      <el-popover
        placement="bottom-start"
        width="150"
        trigger="hover"
        v-model:visible="popoverVisible"
      >
        <ul class="sort-options">
          <li
            v-for="option in options"
            :key="option"
            :class="{ active: option === selectedOption }"
            @click="selectOption(option)"
          >
            {{ option }}
          </li>
        </ul>
        <template #reference>
          <el-button class="m-2">{{ selectedOption }} <i class="el-icon-arrow-down"></i></el-button>
        </template>
      </el-popover>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const options = ['当前所有','热门产品', '新品上市', '价格由高到低', '价格由低到高']
  const selectedOption = ref(options[0])
  const popoverVisible = ref(false)
  
  const selectOption = (option) => {
    selectedOption.value = option
    popoverVisible.value = false
   emits('update:selectedOption',selectedOption.value)
  }
     const emits = defineEmits(['update:selectedOption'])
     const transitOption=()=>{
      emits('update:selectedOption',{sortOption:selectedOption.value})
     }
  </script>
  
  <style lang="scss" scoped>
  .sort-options {
    list-style: none;
    padding: 0;
    margin: 0;
    
    li {
      padding: 8px 12px;
      cursor: pointer;
      &:hover {
        background-color: #f5f5f5;
      }
      &.active {
        background-color: #f5f5f5;
        font-weight: bold;
      }
    }
  }
  </style>